<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>因子描述</title>
    {{include 'pages/base/layout.html'}}
    <script type="text/javascript" src="{{=URL('static','adminlte/plugins/zTree/v3/js/jquery.ztree.core-3.5.js')}}"></script>
    <script type="text/javascript" src="{{=URL('static','adminlte/plugins/zTree/v3/js/jquery.ztree.excheck-3.5.js')}}"></script>
    <script type="text/javascript" src="{{=URL('static','adminlte/plugins/zTree/v3/js/jquery.ztree.exedit-3.5.js')}}"></script>
    <link rel="stylesheet" href="{{=URL('static','adminlte/plugins/zTree/v3/css/metroStyle/metroStyle.css')}}" type="text/css">
<SCRIPT type="text/javascript">
    var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            view: { showIcon: true, selectedMulti: false, nameIsHTML: true, fontCss: setFontCss_ztree },
            callback: {
                onClick: onClick
            }
        };
    var zNodes=[{{for row in factor:}}{id:'{{=row.id}}',pId:'{{=row.parent_id}}',name:'{{=row.name}}'},{{pass}}];
        var log, className = "dark";
        function beforeDrag(treeId, treeNodes) {
            return false;
        }
        function showLog(str) {
            if (!log) log = $("#log");
            log.append("<li class='"+className+"'>"+str+"</li>");
            if(log.children("li").length > 8) {
                log.get(0).removeChild(log.children("li")[0]);
            }
        }
        function getTime() {
            var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds(),
            ms=now.getMilliseconds();
            return (h+":"+m+":"+s+ " " +ms);
        }

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.id
                + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.id);
            if (btn) btn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj("factorTree");

                $.ajax({
                    type: 'POST',
                    url: '{{=URL('alpha','insertFactor')}}',
                    data: {pid:treeNode.id},
                    success: function (data) {
                          zTree.addNodes(treeNode, {id:data.id, pId:treeNode.id, name:data.name});
                    }
                });
                return false;

            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.id).unbind().remove();
        };

        function onClick(event, treeId, treeNode) {
            $('#mainFrame').attr("src","{{=URL('alpha','factor_desc_form')}}"+"?id="+treeNode.id);
        };
        function selectAll() {
            var zTree = $.fn.zTree.getZTreeObj("factorTree");
            zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#factorTree"), setting, zNodes);
            $("#selectAll").bind("click", selectAll);
        });

        /**
	 * 展开树
	 * @param treeId
	 */
    function expand_ztree(treeId){
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        treeObj.expandAll(true);
    }

    /**
	 * 收起树：只展开根节点下的一级节点
	 * @param treeId
	 */
    function close_ztree(treeId){
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var nodes = treeObj.transformToArray(treeObj.getNodes());
        var nodeLength = nodes.length;
        for (var i = 0; i < nodeLength; i++) {
            if (nodes[i].id == '0') {
                //根节点：展开
                treeObj.expandNode(nodes[i], true, true, false);
            } else {
                //非根节点：收起
                treeObj.expandNode(nodes[i], false, true, false);
            }
        }
    }

    /**
     * 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】
     * @param treeId
	 * @param searchConditionId 文本框的id
     */
	function search_ztree(treeId, searchConditionId){
		searchByFlag_ztree(treeId, searchConditionId, "");
	}

    /**
     * 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】
     * @param treeId
     * @param searchConditionId		搜索条件Id
     * @param flag 					需要高亮显示的节点标识
     */
	function searchByFlag_ztree(treeId, searchConditionId, flag){
		//<1>.搜索条件
		var searchCondition = $('#' + searchConditionId).val();
		//<2>.得到模糊匹配搜索条件的节点数组集合
		var highlightNodes = new Array();
		if (searchCondition != "") {
			var treeObj = $.fn.zTree.getZTreeObj(treeId);
			highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
		}
		//<3>.高亮显示并展示【指定节点s】
		highlightAndExpand_ztree(treeId, highlightNodes, flag);
	}

	/**
	 * 高亮显示并展示【指定节点s】
	 * @param treeId
	 * @param highlightNodes 需要高亮显示的节点数组
	 * @param flag			 需要高亮显示的节点标识
	 */
	function highlightAndExpand_ztree(treeId, highlightNodes, flag){
		var treeObj = $.fn.zTree.getZTreeObj(treeId);
		//<1>. 先把全部节点更新为普通样式
		var treeNodes = treeObj.transformToArray(treeObj.getNodes());
		for (var i = 0; i < treeNodes.length; i++) {
			treeNodes[i].highlight = false;
			treeObj.updateNode(treeNodes[i]);
		}
		//<2>.收起树, 只展开根节点下的一级节点
		close_ztree(treeId);
		//<3>.把指定节点的样式更新为高亮显示，并展开
		if (highlightNodes != null) {
			for (var i = 0; i < highlightNodes.length; i++) {
				if (flag != null && flag != "") {
					if (highlightNodes[i].flag == flag) {
						//高亮显示节点，并展开
						highlightNodes[i].highlight = true;
						treeObj.updateNode(highlightNodes[i]);
						//高亮显示节点的父节点的父节点....直到根节点，并展示
						var parentNode = highlightNodes[i].getParentNode();
						var parentNodes = getParentNodes_ztree(treeId, parentNode);
						treeObj.expandNode(parentNodes, true, false, true);
						treeObj.expandNode(parentNode, true, false, true);
					}
				} else {
					//高亮显示节点，并展开
					highlightNodes[i].highlight = true;
					treeObj.updateNode(highlightNodes[i]);
					//高亮显示节点的父节点的父节点....直到根节点，并展示
					var parentNode = highlightNodes[i].getParentNode();
					var parentNodes = getParentNodes_ztree(treeId, parentNode);
					treeObj.expandNode(parentNodes, true, false, true);
					treeObj.expandNode(parentNode, true, false, true);
				}
			}
		}
	}

	/**
	 * 递归得到指定节点的父节点的父节点....直到根节点
	 */
	function getParentNodes_ztree(treeId, node){
		if (node != null) {
			var treeObj = $.fn.zTree.getZTreeObj(treeId);
			var parentNode = node.getParentNode();
			return getParentNodes_ztree(treeId, parentNode);
		} else {
			return node;
		}
	}

	/**
	 * 设置树节点字体样式
	 */
	function setFontCss_ztree(treeId, treeNode) {
		if (treeNode.id == 0) {
			//根节点
			return {color:"#333", "font-weight":"bold"};
		} else if (treeNode.isParent == false){
			//叶子节点
			return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
		} else {
			//父节点
			return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
		}
    }
</SCRIPT>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="padd" style="padding-bottom: 0px;">
                <div class="input-append row-fluid" style="margin-bottom: 0px;">
                    <input id="search_condition" type="text" placeholder="请输入搜索条件" class="span8" style="font-size:12px"/>
                    <button type="button" class="btn btn-info" onclick="search_ztree('factorTree', 'search_condition')">搜索</button>
                </div>
            </div>
            <ul id="factorTree" class="ztree"></ul>
        </div>
        <div class="col-sm-8" style=" height: 400px;">
            <iframe id="mainFrame" name="mainFrame" src="" style=" width: 100%; height: 100%; padding: 0;"  frameborder="0" ></iframe>
        </div>
    </div>
</div>
</body>
</html>